<template>
  <div class="big">
    <div class="header_top">
      <div class="title-name">我的日程</div>
      <div class="cha">查看全部</div>
    </div>
    <div class="content">
      <div class="content_top">
        <h3 class="renderTime">{{ currentDate }}</h3>
        <div class="calender-top-right">
          <i class="left-arrow" @click="changeWeek('prev')"><</i>
          <span class="week-text" style="line-height: 33px;">{{ weekText }}</span>
          <i class="right-arrow" @click="changeWeek('next')">></i>
        </div>
      </div>

      <div class="nav_top">
        <div class="nav_tabs">
          <div
            v-for="(day, index) in weekDays"
            :key="index"
            :class="{'active': selectedDay === day.date, 'inactive': selectedDay !== day.date}"
            @click="selectDay(day.date)"
          >
            {{ day.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';

const currentDate = ref('');
const weekText = ref('本周');
const selectedDay = ref('');
const weekDays = ref([]);

// 格式化日期
function formatDate(date: Date): string {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  return `${year}年${month}月${date.getDate()}日`;
}
// 更新周数据
function updateWeek(baseDate: Date) {
  const startOfWeek = new Date(baseDate);
  const currentWeekDay = startOfWeek.getDay();
  const diffToMonday = currentWeekDay === 0 ? -6 : 1 - currentWeekDay;
  startOfWeek.setDate(baseDate.getDate() + diffToMonday);

  const week = [];
  for (let i = 0; i < 7; i++) {
    const day = new Date(startOfWeek);
    day.setDate(startOfWeek.getDate() + i);
    const label = `${day.getDate()} ${['周一', '周二', '周三', '周四', '周五', '周六', '周日'][i]}`;
    week.push({ date: formatDate(day), label });
  }
  weekDays.value = week;
}

//切换周
function changeWeek(direction: 'prev' | 'next') {
  const today = new Date();
  const currentWeekDay = today.getDay();
  const diffToMonday = currentWeekDay === 0 ? -6 : 1 - currentWeekDay;
  const monday = new Date(today.setDate(today.getDate() + diffToMonday));

  // 点击上一周
  if (direction === 'prev') {
    monday.setDate(monday.getDate() - 7);
    weekText.value = '上周';
  }
  // 点击下一周
  else if (direction === 'next') {
    monday.setDate(monday.getDate() + 7);
    weekText.value = '下周';
  }
  // 如果是当前周
  else {
    weekText.value = '本周';
  }

  // 更新数据
  updateWeek(monday);
}


function selectDay(date: string) {
  selectedDay.value = date;
}

onMounted(() => {
  const today = new Date();
  updateWeek(today);
  selectedDay.value = formatDate(today);
  currentDate.value = formatDate(new Date());
});
</script>

<style scoped>
.big {
  width: 560px;
  height: 610px;
  background-color: #fff;
  border-radius: 4px;
  padding-left: 8px;
  margin: 16px 0px 0px;
}

.header_top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.title-name {
  height: 55px;
  padding: 17px 0px;
  font-size: 16px;
  font-weight: 900;
  color: #333;
}

.cha {
  width: 70px;
  font-size: 14px;
  height: 55px;
  color: #999;
  cursor: pointer;
  line-height: 55px;
}

.content {
  width: 100%;
  height: 511px;
}

.content_top {
  width: 100%;
  height: 33px;
  margin-bottom: 16px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.renderTime {
  font-size: 18px;
  font-weight: bold;
}

.calender-top-right {
  width: 123px;
  height: 33px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  margin-right: 10px;
}

.left-arrow {
  width: 32px;
  height: 33px;
  color: #999999;
  cursor: pointer;
  align-items: center;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border-right: 1px solid #ccc;
}
.right-arrow{
  width: 32px;
  height: 33px;
  color: #999999;
  cursor: pointer;
  align-items: center;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  border-left: 1px solid #ccc;
}

.nav_top {
  width: 100%;
  height: 273px;
  border: 1px solid #eee;
}

.nav_tabs {
  display: flex;
  justify-content: space-between;
}

.nav_tabs div {
  width: 80px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-right: 1px solid #eee;

}

.nav_tabs div:last-child {
  border-right: none;
}

.nav_tabs .active {
  background-color: white;
  color: #CF0020;
}

.nav_tabs .inactive {
  background: #F5F5F5;
  color: #999;
}
</style>
